<template>
    <rx-layout>
        <div slot="center" style>
            <a-form-model ref="formModel" :model="mdl" :rules="rules">
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.indexColumn','索引字段')" prop="columns">
                            <div class="refererEdit-center-header">
                                <div><span @click="add" style="cursor: pointer" v-show="this.mdl.columns.length<3"><my-icon type="iconxinzeng"></my-icon><span>{{$ti18('rxList.newBtn',"新增")}}</span></span></div>
                                <div style="cursor: pointer" @click="del()"><my-icon type="iconqingchu"></my-icon>{{$ti18('rxList.delBtn','清除')}}</div>
                            </div>
                            <div style="margin-top: 17px">
                                <div class="refererEdit-common" v-for="(record,index) in mdl.columns" :key="index">
                                    <my-icon @click="del(index)" type="iconoffline" style="cursor: pointer"></my-icon>
                                    <a-select v-model="record.indexName" :placeholder="i18n('form.indexColumn','请选择索引字段','select')" style="width: 40%">
                                        <a-select-option :value="field.fieldName" v-for="(field,index) in fields">{{field.comment}}</a-select-option>
                                    </a-select>
                                    <a-select v-model="record.indexSort" style="width: 40%;margin-left: 20px;">
                                        <a-select-option value="ASC">{{i18n('list.ascOrder','升序')}}</a-select-option>
                                        <a-select-option value="DESC">{{i18n('list.desOrder','降序')}}</a-select-option>
                                    </a-select>
                                </div>
                            </div>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.indexAlias','索引名')" prop="indexAlias">
                            <a-input :placeholder="i18n('msg.indexAliasDesc','不输入则默认按字段名称自动生成')" v-model.trim="mdl.indexAlias" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.indexType','索引类型')" prop="nonUnique">
                            <a-checkbox v-model="checkbox">{{ i18n('form.uniqueIndex','唯一索引') }}</a-checkbox>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </div>
    </rx-layout>
</template>

<script>
import {BaseFormModel} from "@lowcode/jpaas-common-lib";
import FormBoEntityApi from "@/api/form/bo/formBoEntity";
export default {
    name: "indexEdit",
    mixins: [BaseFormModel],
    props:{
        entityId:{
            type:String,
            default:""
        },
        fields:{
            type:Array,
            default:()=>[]
        }
    },
    data() {
        return {
            mdl:{
                indexAlias:"",
                nonUnique:1,
                columns:[]
            },
            rules:{
                indexAlias: [{ required:false,message: this.i18n('form.indexAlias','请输入索引别名','select'), trigger: 'change' }],
                nonUnique: [{ required:false,message: this.i18n('form.indexType','请选择索引类型','select'), trigger: 'change' }],
                columns: [{ required:true,message: this.i18n('form.indexColumn','请选择索引字段','select'), trigger: 'change' }]
            },
            checkbox:false
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formDb",key);
        },
        add(){
            this.mdl.columns.push({indexName:"", indexSort:"ASC",});
        },
        del(index){
            var self=this;
            this.$confirm({
                title: (index || index==0) ?this.$ti18('rxMsa.delInfo','您确定需要删除选中的记录吗？'):this.i18n('msg.delMsg','您确定要清空记录吗？'),
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                zIndex:99999,
                onOk() {
                    if(index || index==0){
                        self.mdl.columns.splice(index,1);
                    }else {
                        self.mdl.columns=[];
                    }
                },
            });
        },
        saveIndex(isContinue,back){
            var res=this.vaildColumns();
            if(!res){
                return;
            }
            if(this.checkbox){
                this.mdl.nonUnique=0;
            }else {
                this.mdl.nonUnique=1;
            }
            FormBoEntityApi.createdIndex({indexObj:this.mdl,entityId:this.entityId}).then(res=>{
                if(res.success && !isContinue){
                    back();
                }
            });
        },
        vaildColumns(){
            if(this.mdl.columns.length==0){
                this.$message.error(this.i18n('msg.noSelect','未选择索引字段！'));
                return false;
            }
            var indexAlias="index";
            for (let i = 0; i < this.mdl.columns.length; i++) {
                var column= this.mdl.columns[i];
                if(!column.indexName){
                    this.$message.error(this.i18n('msg.columnNull','索引字段不能为空！'));
                    return false;
                }
                indexAlias+="_"+column.indexName
            }
            if(!this.mdl.indexAlias){
                this.mdl.indexAlias=indexAlias;
            }
            return true;
        }
    },
    watch: {}
}
</script>

<style scoped>
.refererEdit-common{
    display: flex;
    margin-bottom: 10px;
}
.refererEdit-common i{
    font-size: 18px;
    margin-right: 5px;
    margin-top: 7px;
}
.refererEdit-common input{
    flex: 1;
}
.refererEdit-center-header{
    display: flex;
    justify-content: space-between;
    width: 86%;
}
.refererEdit-center-header >div:nth-child(1){
    color: #303030;
    flex: 1;
}
.refererEdit-center-header >div:nth-child(2){
    color: #f94765;
    font-size: 15px;
}
.refererEdit-center-header >div:nth-child(2) i{
    margin-left: 5px;
    font-size: 18px;
}
.refererEdit-center-header >div:nth-child(1) i{
    margin-right: 5px;
    color: #303030;
    font-size: 17px;
}
</style>